import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Backdrop, Container, Typography, Paper, Snackbar } from '@material-ui/core';
import MuiAlert from '@material-ui/lab/Alert';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import CircularProgress from '@material-ui/core/CircularProgress';


function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
}

@inject("baseStore")
@observer
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            roomId: "",
            open: false,
            errorOpen: false,
            errorMsg:""
        }
    }

    render() {
        const vertical = "top";
        const horizontal = "center";
        return (
            <div style={{ margin: 0, padding: 0, border: 0 }}>
                {/* <Button onClick={this.connect} variant="contained" color="primary">
                    连接
                </Button>
                <Button onClick={this.create} variant="contained" color="primary">
                    创建房间
                </Button>
                <Input  onChange={(e)=>{this.setState({roomId:e.target.value})}} />
                <Button onClick={this.join} variant="contained" color="primary">
                    加入房间
                </Button>
                <Button onClick={this.ready} variant="contained" color="primary">
                    准备
                </Button>
                <Button onClick={this.send} variant="contained" color="primary">
                    发言
                </Button> */}
                <Container fixed maxWidth="sm">
                    <Paper style={{ padding: "20px", marginTop: "30px", marginBottom: "10px" }}>
                        <Typography variant="h4" component="h3" gutterBottom>
                            are u ooc ?
                        </Typography>
                        <Typography variant="subtitle1" gutterBottom>
                            游戏规则（游戏开发ing，以目前实际体验为主）：
                        </Typography>
                        <Typography variant="body2" gutterBottom>
                            每个玩家扮演<b>原神</b>角色依次发言，其余玩家通过发言是否符合人物性格、背景、经历等进行卧底判断，卧底不会一次性获取角色全部信息，只会一轮轮进行获取（比如第一轮末生活在蒙德，第二轮末知道性别女等）
                        </Typography>
                        <Typography variant="body2" gutterBottom>
                            为了保证普通玩家不直接透露消息，限制字数发言（10字以内），增加随机主题，增加内鬼角色，除了内鬼之外其他玩家都知道这个主题，内鬼每轮只能选择杀死一个玩家
                        </Typography>
                        <Typography variant="body2" gutterBottom>
                            普通玩家获胜条件：找到全部卧底和内鬼
                        </Typography>
                        <Typography variant="body2" gutterBottom>
                            卧底玩家获胜条件：存活到最后并杀死其他玩家
                        </Typography>
                        <Typography variant="body2" gutterBottom>
                            内鬼玩家获胜条件：存活到最后并杀死其他玩家
                        </Typography>
                        <Typography variant="caption" gutterBottom>
                            例如：若总人数8，卧底可以设置2，内鬼设置1，总人数少于8，卧底可以设置1，内鬼1。
                        </Typography>

                    </Paper>
                    <Button
                        onClick={this.connect}
                        style={{ float: "right", margin: "10px" }}
                        variant="contained"
                        color="primary"
                        size="large"
                        endIcon={<ArrowForwardIcon />}
                    >
                        开始游戏
                    </Button>
                </Container>
                <Backdrop style={{ zIndex: 999, color: "#fff" }} open={this.state.open} >
                    <CircularProgress color="inherit" />
                </Backdrop>
                <Snackbar open={this.state.errorOpen} autoHideDuration={6000} anchorOrigin={{ vertical, horizontal }} >
                    <Alert severity="error">{this.state.errorMsg}</Alert>
                </Snackbar>
            </div >
        );
    }

    connect = () => {
        if(this.props.baseStore.status){
            this.props.history.push({
                pathname: "/start",
                state: this.props.location.pathname
            });
            return;
        }
        let count = 0;
        this.setState({ open: true });
        this.props.baseStore.connect();

        const intervalId = setInterval(() => {
            // 每隔一秒钟增加计数器
            if (this.props.baseStore.status) {
                this.setState({ open: false });
                clearInterval(intervalId);
                this.props.history.push({
                    pathname: "/start",
                    state: this.props.location.pathname
                });
            }
            count++;
            if (count === 100 || this.props.baseStore.errorMsg != "") {
                // 当计数器达到100时，退出  
                clearInterval(intervalId);
                this.setState({ open: false,errorOpen:true ,errorMsg:this.props.baseStore.errorMsg });
                setTimeout(() => {
                    this.props.baseStore.errorMsg = "";
                }, 10);
                setTimeout(() => {
                    this.setState({ errorOpen:false });
                }, 2000);
            }
        }, 100);


    }
}

export default Main;